<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入本地layui.css-->
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
    <!--引入本地自定义的admin.css-->
    <link rel="stylesheet" href="../../static/css/admin.css" media="all">
    <style>
    </style>
</head>
<body>
<div class="layui-form layui-row layui-col-space10" style="margin-left: 140px;margin-right: 140px">
    <div class="layui-col-md9">
        <div class="grid-demo grid-demo-bg1 layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="grid-demo grid-demo-bg1">
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属部门:</label>
                            <div class="layui-input-inline">
                                <select name="dept_full_name" id="dept_id" lay-verify="required" lay-search="" style="height: 38px;width:200px;">
                                    <option value="1"></option>
                                    <option value="2"></option>
                                    <option value="3"></option>
                                    <option value="4"></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">职位名称:</label>
                            <div class="layui-input-inline">
                                <select name="job_name" id="job_id" lay-verify="required" lay-search="" style="height: 38px;width:200px;">
                                    <option value="1"></option>
                                    <option value="2"></option>
                                    <option value="3"></option>
                                    <option value="4"></option>
                                    <option value="5"></option>
                                    <option value="6"></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名:</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class=" layui-hide">
                            <label class="layui-form-label">姓名-id</label>
                            <div class="layui-input-block">
                                <input type="text" name="archives_id"  placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">EMAIL:</label>
                            <div class="layui-input-block">
                                <input type="text" name="email" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-inline layui-form-item" style="margin-bottom: 15px">
                            <label class="layui-form-label">档案状态</label>
                            <div class="layui-input-inline">
                                <select name="status" lay-verify="required" lay-search="" style="height: 38px;width:200px;">
                                    <option value="">请选择</option>
                                    <option value="正式员工">正式员工</option>
                                    <option value="离职">离职</option>
                                    <option value="已删除">已删除</option>
                                    <option value="实习员工">实习员工</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item" style=" margin-bottom: 15px">
                            <label class="layui-form-label">职位编码:</label>
                            <div class="layui-input-block">
                                <input type="text" name="job_id" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline layui-form-item" style="margin-bottom: 15px">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <select name="sex" lay-verify="required" lay-search="" style="height: 38px;width:200px;">
                                    <option value="">请选择</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系电话:</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone" lay-verify="phone" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">住址:</label>
                <div class="layui-input-block">
                    <input type="text" name="address" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md3">
        <div class="grid-demo">
            <div style="width: 300px;height: 300px; border: solid #00e1ff">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="grid-demo grid-demo-bg1">
                <div class="layui-form-item">
                    <label class="layui-form-label">身份证号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="identity" lay-verify="identity" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">毕业院校:</label>
                    <div class="layui-input-block">
                        <input type="text" name="graduate_school" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline layui-form-item">
                    <label class="layui-form-label">薪酬标准</label>
                    <div class="layui-input-inline">
                        <select name="sal_standard_name" lay-verify="required" lay-search="" style="height: 38px;width:200px;margin-bottom: 16px ">
                            <option value="">请选择</option>
                            <option value="高级软件工程师">高级软件工程师</option>
                            <option value="中级软件工程师">中级软件工程师</option>
                            <option value="初级软件工程师">初级软件工程师</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">社保卡号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="security_card_number" lay-verify="security_card_number" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo">

                <div class="layui-form-item">
                    <label class="layui-form-label">户口所在地:</label>
                    <div class="layui-input-block">
                        <input type="text" name="location" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">专业:</label>
                    <div class="layui-input-block">
                        <input type="text" name="major" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开户行:</label>
                    <div class="layui-input-block">
                        <input type="text" name="bank" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">登记人:</label>
                    <div class="layui-input-block">
                        <input type="text" name="regist" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo grid-demo-bg1">
                <div class="layui-form-item">
                    <label class="layui-form-label">政治面貌:</label>
                    <div class="layui-input-block">
                        <input type="text" name="politic_outlook" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline layui-form-item">
                    <label class="layui-form-label">学历</label>
                    <div class="layui-input-inline">
                        <select name="degree" lay-verify="required" lay-search="" style="height: 38px;width:200px;margin-bottom: 16px ">
                            <option value="">请选择</option>
                            <option value="专科">专科</option>
                            <option value="本科">本科</option>
                            <option value="硕士">硕士</option>
                            <option value="博士">博士</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">银行卡号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="count" lay-verify="count" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">建档日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="set_time" class="layui-input" id="test24" placeholder="yyyy-MM-dd">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <hr class="ws-space-16">
        <label class="layui-form-label">个人履历:</label>
        <div class="layui-input-block">
        <textarea name="resume" placeholder="多行文本框" lay-verify="required" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <hr class="ws-space-16">
        <label class="layui-form-label">家庭关系信息:</label>
        <div class="layui-input-block">
            <textarea name="relationship" lay-verify="required" placeholder="多行文本框" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <hr class="ws-space-16">
        <label class="layui-form-label">备注:</label>
        <div class="layui-input-block">
            <textarea name="remark" placeholder="多行文本框" lay-verify="required" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <hr class="ws-space-16">
        <label class="layui-form-label">简历附件:</label>
        <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
            <button type="button" class="layui-btn" id="test9">开始上传</button>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>
</div>
<script src="../../static/layui/layui.js"></script>
<script>
    layui.use(['form', 'laydate','upload', 'util'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;
        var upload = layui.upload;
        var $ = layui.$;

//自定义验证规则
        form.verify({
            email: [
                /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                ,'您输入的email格式有误'
            ],
            phone:[
                /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
                ,'请输入正确的大陆手机号'
            ],
            identity: [
                /^\d{15}|\d{18}$/
                ,'请输入正确的大陆身份证号'
            ],
            count:[
                /^[1-9]\d{9,29}$/
                ,'您输入有误，请输入正确的银行卡号'
            ],
            security_card_number:[
                /^\d{15}|\d{18}$/
                ,'请输入正确的社保卡号'
            ]

        });
        //获取部门下拉框    //查询分页------下拉框回显------图片回显-------
        $.ajax({
            url: '/sys_dept/findDept',
            type: 'GET',
            dataType: 'json',
            success: function(res) {
                if (res.code === 0) {
                    var deptList = res.data;
                    var $deptSelect = $('#dept_id');
                    // 先清空旧的 option
                    $deptSelect.empty();
                    // 添加 "请选择" 选项
                    var $defaultOption = $('<option value="">请选择</option>');
                    $deptSelect.append($defaultOption);
                    // 向 select 中添加新的 option
                    for (var i = 0; i < deptList.length; i++) {
                        var dept = deptList[i];
                        var $option = $('<option value="' + dept.dept_id + '">'
                            + dept.dept_full_name + '</option>');
                        $deptSelect.append($option);
                    }
                    // 使用 layui 的 form.render() 方法重新渲染表单元素
                    layui.form.render('select');
                } else {
                    layer.alert('获取部门列表失败', { icon: 2 });
                }
            },
            error: function(xhr, status, error) {
                layer.alert('获取部门列表失败', { icon: 2 });
            }
        });
        //获取下拉框
        $.ajax({
            url: '/sys_job/findJob',
            type: 'GET',
            dataType: 'json',
            success: function(res) {
                if (res.code === 0) {
                    var deptList = res.data;
                    var $deptSelect = $('#job_id');
                    // 先清空旧的 option
                    $deptSelect.empty();
                    // 添加 "请选择" 选项
                    var $defaultOption = $('<option value="">请选择</option>');
                    $deptSelect.append($defaultOption);
                    // 向 select 中添加新的 option
                    for (var i = 0; i < deptList.length; i++) {
                        var dept = deptList[i];
                        var $option = $('<option value="' + dept.job_id + '">'
                            + dept.job_name + '</option>');
                        $deptSelect.append($option);
                    }
                    // 使用 layui 的 form.render() 方法重新渲染表单元素
                    layui.form.render('select');
                } else {
                    layer.alert('获取职位列表失败', { icon: 2 });
                }
            },
            error: function(xhr, status, error) {
                layer.alert('获取职位列表失败', { icon: 2 });
            }
        });
        // 获取角色值
        //自定义事件
        laydate.render({
            elem: '#test24',
            format: 'yyyy-MM-dd'
        });
        // 提交事件
        form.on('submit(demo1)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
        });
        upload.render({
            elem: '#test8'
            ,url: '' //此处配置你自己的上传接口即可
            ,auto: false
            //,multiple: true
            ,bindAction: '#test9'
            ,done: function(res){
                layer.msg('上传成功');
                console.log(res)
            }
        });
    });
</script>

<script>
    layui.use(function(){
        var upload = layui.upload;
        // 渲染
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#test8',
            url: '/UploadServlet', // 实际使用时改成您自己的上传接口即可。
            multiple:true,
            accept:'file',
            auto: false,//-----------
            bindAction: '#test9',
            done: function(res){
                layer.msg('上传成功');
                console.log(res)
                $('#training_url').val(res.url)
                //
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
        });
    });
</script>
</body>
</html>